<template>
	<div>
		<sh-card title="基础用法" class="mb-3">
			<sh-badge :count="3">
				<a href="#" class="demo-badge"></a>
			</sh-badge>
			<sh-badge>
				<a href="#" class="demo-badge" style="margin-left: 32px"></a>
				<template #count>
					<sh-icon type="md-time" color="#ed4014" size="16" />
				</template>
			</sh-badge>
		</sh-card>
		<sh-card title="小红点" class="mb-3">
			<sh-badge dot>
				<a href="#" class="demo-badge"></a>
			</sh-badge>
			<sh-badge dot>
				<sh-icon type="ios-notifications-outline" size="26"></sh-icon>
			</sh-badge>
			<sh-badge dot>
				<a href="#">可以是一个链接</a>
			</sh-badge>
		</sh-card>
		<sh-card title="封顶数字" class="mb-3">
			<sh-badge :count="100">
				<a href="#" class="demo-badge"></a>
			</sh-badge>
			<sh-badge :count="1000" overflow-count="999">
				<a href="#" class="demo-badge"></a>
			</sh-badge>
		</sh-card>
		<sh-card title="独立使用及自定义样式" class="mb-3">
			<sh-badge :count="10" />
			<sh-badge :count="20" class-name="demo-badge-alone" />
		</sh-card>
		<sh-card title="自定义内容" class="mb-3">
			<sh-badge text="new">
				<a href="#" class="demo-badge"></a>
			</sh-badge>
			<sh-badge text="hot">
				<a href="#" class="demo-badge"></a>
			</sh-badge>
		</sh-card>
		<sh-card title="状态点" class="mb-3">
			<div>
				<sh-badge status="success" />
				<sh-badge status="error" />
				<sh-badge status="default" />
				<sh-badge status="processing" />
				<sh-badge status="warning" />
			</div>
			<sh-badge status="success" text="Success" />
			<sh-badge status="error" text="Error" />
			<sh-badge status="default" text="Default" />
			<sh-badge status="processing" text="Processing" />
			<sh-badge status="warning" text="Warning" />
		</sh-card>
		<sh-card title="多彩徽标" class="mb-3">
			<sh-badge color="blue" text="blue" />
			<sh-badge color="green" text="green" />
			<sh-badge color="red" text="red" />
			<sh-badge color="yellow" text="yellow" />
			<sh-badge color="pink" text="pink" />
			<sh-badge color="magenta" text="magenta" />
			<sh-badge color="volcano" text="volcano" />
			<sh-badge color="orange" text="orange" />
			<sh-badge color="gold" text="gold" />
			<sh-badge color="lime" text="lime" />
			<sh-badge color="cyan" text="cyan" />
			<sh-badge color="geekblue" text="geekblue" />
			<sh-badge color="purple" text="purple" />
			<sh-badge color="#2db7f5" text="#2db7f5" />
			<sh-badge color="#f50" text="#f50" />
		</sh-card>
	</div>
</template>

<script>
export default {
	name: 'BaseBadge',
	data() {
		return {}
	}
}
</script>

<style lang="scss">
.sh-badge {
	margin-right: 30px;
}
.demo-badge {
	width: 42px;
	height: 42px;
	background: #eee;
	border-radius: 6px;
	display: inline-block;
}
.demo-badge-alone {
	background: #5cb85c !important;
}
</style>
